<!doctype html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset='utf-8'>
    <title>登陆界面</title>
    <style type="text/css">
        body
        {
            margin:0;
            padding: 0;
            font-family: sans-serif;


            background-size: cover;
        }
        .box
        {
            position: absolute;
            top:50%;
            left: 85%;
            transform: translate(-50%,-50%);
            width:400px;
            padding: 40px;
            background: rgba(0,0,0,.8);
            box-sizing : border-box;
            box-shadow: 0 15px 25px rgba(0,0,0,.9);
            border-radius: 10px;
        }
        .box h2
        {
            margin:0 0 30px;
            padding: 0;
            color: #fff;
            text-align: center;
        }
        .box .inputBox
        {
            position: relative;
        }
        .box .inputBox input
        {
            width:100%;
            padding: 10px 0;
            font-size: 16px;
            color: #fff;
            letter-spacing: 1px;
            margin-bottom: 30px;
            border: none;
            border-bottom: 1px solid #fff;
            outline: none;
            background: transparent;
        }
        .box .inputBox label
        {
            position: absolute;
            top:0;
            left: 0;
            padding: 10px 0;
            letter-spacing: 1px;
            font-size: 16px;
            color: #fff;
            pointer-events: none;
            transition: .5s;
        }
        .box .inputBox input:focus ~ label,
        .box .inputBox input:valid ~ label
        {
            top:-18px;
            left:0;
            color:#03a9f4;
            font-size: 12px;
        }
        .box input[type="submit"]
        {
            background: transparent;

            border: none;
            outline:none;
            color: #fff;
            background: #03a9f4;
            padding: 10px 20px;
            cursor:pointer;
            border-radius: 5px;
        }
        .m-button {
            border: none;
            outline:none;
            color: #fff;
            background: #03a9f4;
            padding: 10px 20px;
            cursor:pointer;
            border-radius: 5px;
            margin-left: 150px;
        }
        .m-p{
            margin-left: 180px;
        }

    </style>
    <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/font-awesome.min.css}">
    <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>
</head>
<body style="background: url(../images/login.jfif)">

<div class="box" >
    <h2>用户登录</h2>

    <p th:text="${t}" th:if="${not #strings.isEmpty(t)}" style="color: #e54f4f"  class="m-p"></p>

    <form action="/login" method="post">
        <div class="inputBox">
            <input type="text" name="username" required autocomplete="off">
            <label>用户名</label>
        </div>
        <div class="inputBox">
            <input type="password" name="password"  required >
            <label>密码</label>
        </div>
         <input type="submit" name="" value="登录" id="login">
         <button class="m-button" id="toRegiest" >注册</button>
    </form>



</div>

</body>
<script type="application/javascript" src="../js/jquery-3.5.1.js"></script>
<script>
    $("#toRegiest").click(function (){
        window.location.href=("toRegiest")
    })
</script>
</html>